<template>
  <div class="nav-box">
    <ul class="nav-message-box">
      <li v-for="(item,index) in navbarMessage" :key="index">
        <router-link class="nav-message" active-class="nav-active" :to="{name:item.path}">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      navbarMessage: [{name: '推荐', path: 'Recommend'},
        {name: '排行榜', path: 'LeaderBoard'},
        {name: '歌单', path: 'SongList'},
        {name: '主播电台', path: 'AnchorStation'},
        {name: '歌手', path: 'Singer'},
        {name: '新碟上架', path: 'NewDiscsOnShelves'}],
    }
  },
}
</script>

<style scoped lang="less">
.nav-box {
  padding-left: 363px;
  background-color: #B2281E;
  display: flex;
  
  .nav-message-box {
    display: flex;
    
    .nav-message {
      height: 19px;
      margin: 8px 25px 8px 0;
      padding: 0 10px;
      display: flex;
      align-items: center;
      font-size: 12px;
      border-radius: 9px;
      color: #ffffff;
      transition: all .2s linear;
      &:hover {
        background-color: #D45755FF;
        transform: translateY(-1px);
        box-shadow: 5px 5px 10px #DC2415FF;
      }
    }
    
    .nav-active {
      background-color: #D45755FF;
    }
  }
}
</style>
